<template>
  <div id="city-map">
    <div class="content">
      <!--<TopViews/>-->
      <LeftChart :infrastructureList="infrastructureList"/>
      <!--<CityLegend/>-->
      <SearchPanel :infrastructureList="infrastructureList"/>

    </div>
  </div>
</template>

<script>
  import TopViews from './homeViews/titleView.vue'
  import LeftChart from './cityMap/leftChart.vue'
  import SearchPanel from './cityMap/searchPanel.vue'
  import CityMapViewCtroller from '../service/citymapViewCtroller'
  export default {
    name: 'CityMap',
    data () {
      return {
        infrastructureList:[], //左侧基础设施列表

      }
    },
    mounted(){
      this.controller = new CityMapViewCtroller(this);
      this.controller.getInfrastructureList();

    },
    components: {
      TopViews,
      LeftChart,
      // CityLegend,
      SearchPanel
    },
  }
</script>

<style lang="scss" scoped>
  @import "../../static/common/common.scss";

  #city-map {
    width: 100%;
    height: $min-height;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 20px 15px;
    box-sizing: border-box;
    overflow-x: hidden;
    pointer-events: none;
    .content{
      position: relative;
      width: 100%;
      height: 100%;
    }
  }
</style>
